<template>
    <el-container>
      <el-aside width="280px" class="postList_css">
          <FIPanel class="page-tree" :usePadding="false">
              <!-- <div class="page-tree__title">标签</div> -->
              <!-- <div class="page-tree__line"></div> -->
              <!-- <el-input
                  :type="'text'"
                  v-model="tagName"
                  placeholder="请输入"
                  @input="onInput"
                  @keyup="onInput"
                  style="padding: 0 15px 15px 15px"
                >
                  <template #suffix>
                    <el-icon style="vertical-align: middle">
                      <Search @click="getTagList" />
                    </el-icon>
                  </template>
                </el-input>
                <p
                  v-for="(item, index) in postChing(tagList, tagName)"
                  :key="item.postId"
                  :class="postActive == index ? 'postActive_css' : ''"
                  @click="selectPostClick(item, index)"
                >
                  {{ item.tagName }}
                  <el-button v-if="postActive == index" size="small" style="float:right;margin-top:6px;" @click.stop="copyClick(item.tagName)">复制</el-button>
                </p> -->
                <el-input
                    class="page-tree__search"
                    v-model="filterText"
                    :prefix-icon="Search"
                    style="width: 250px"
                    placeholder="请输入"
                />
                <el-tree
                    :data="treeList"
                    :props="defaultProps"
                    :check-strictly="false"
                    @node-click="handleNodeClick"
                    :expand-on-click-node="true"
                    :check-on-click-node="false"
                    highlight-current
                    ref="treeRef"
                    node-key="nodeNo"
                    class="tree_css"
                    :default-expand-all="false"
                    :filter-node-method="filterNode"
                  >
                      <template #default="{ data }">
                      <div class="custom-tree-node">
                        <el-tooltip
                          class="box-item"
                          effect="dark"
                          :content="data.label"
                          placement="top-start"
                        >
                        <span>{{ data.label }}</span>
                      </el-tooltip>
                        <!-- <el-dropdown
                          class="custom-tree-node-add"
                          trigger="click"
                          v-if="data.label == 'ROOT'"
                        >
                          <i class="font_family icon-xinzeng"></i>
                          <template #dropdown>
                            <el-dropdown-menu>
                              <el-dropdown-item @click="addBtn(data,'add')">添加目录</el-dropdown-item>
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown> -->
                        <el-dropdown
                          class="custom-tree-node-add"
                          trigger="click"
                          v-if="!data.children"
                        >
                          <div class="action-dropdown-link">...</div>
                          <template #dropdown>
                            <el-dropdown-menu>
                              <el-dropdown-item @click.stop="copyClick(data.label)">复制</el-dropdown-item>
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                      </div>
                    </template>
                  </el-tree>
              </FIPanel>
      </el-aside>
      <el-container>
        <el-main>
          编辑器位置
        </el-main>
      </el-container>
    </el-container>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive, watch, toRaw, unref } from 'vue'
import { initSearchData } from '@/utils/common'
import type { PageConfig, Column } from '@/types/components'
import type { DrawerProps } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { getCurrentInstance } from 'vue'
import { useRoute } from 'vue-router'
import { ElTree } from 'element-plus'
import { useMessage, } from '@/hooks/message'
import { apiGetCodeitems} from '@/api/configEnvMaint/index.ts'
import clipboard3 from "vue-clipboard3"
import { apiEditTmpl,apiQueryTagTree } from '@/api/modules/GM.js'
const buttonRef = ref()
const popoverRef = ref()
const route = useRoute()
const treeRef = ref<InstanceType<typeof ElTree>>()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}
const drawer = ref(false)
const direction = ref<DrawerProps['direction']>('rtl')
const tagList = ref([])
const orgVisible = ref(false)
const isTableLoading = ref(false)
const mubanTitle = ref('新增模版窗口')
// 页面编码
const tableId = 'authManage'
// 保存成功按钮状态，默认不展示底部保存，取消按钮
const tagName = ref('')
const tableRef = ref(null)
const addInfo = ref({
  doctmplCode:'',
  doctmplName:'',
  doctmplType:'',
  bizType:'',
  categoryId:'',
  doctmplId:'',
  doctmplPath:'',
  remark:'',
})
const _isNew = ref(1)
const filterText = ref('')
const treeList = ref([])
const getTagList = () =>{
  let par = {
    tagName:'',
  }
  apiQueryTagTree(par)
      .then((res) => {
        console.log(res, 'res')
        isTableLoading.value = false
        if (res.data.success) {
          // tagList.value = res.data.data.result
          treeList.value = [transformData(res.data.data)];
        }
      })
      .catch((error: any) => {
        isTableLoading.value = false
        // 处理错误
      })
}
const handleNodeClick = (data: Tree) => {
    // selNode.value = data
    console.log(data, 'data')
    // searchFn()
  }
  const filterNode = (value: string, data: Tree) => {
    if (!value) return true
    return data.label.includes(value)
  }
const postChing = (list, input) => {
  if (!input) return list
  return list.filter((item) => {
    if (item.postCname.indexOf(input) != -1 || item.postEname.indexOf(input) != -1) {
      return item
    }
  })
}
const defaultProps = ref({
      children: 'children',
      label: 'label'
    });
  const transformData = (node) => {
    const newNode = {
      value: node.nodeNo,
      label: node.nodeLabel,
      children: []
    };

    if (node.subNodes && node.subNodes.length > 0) {
      newNode.children = node.subNodes.map(subNode => transformData(subNode));
    } else {
      delete newNode.children; // 删除空的 children 属性
    }
    return newNode;
  };
const copyClick = async (data) => {
  const { toClipboard } = clipboard3();
  try {
    await toClipboard(data);
    useMessage().success('以复制')
  } catch (error) {
    useMessage().warning('复制失败')
  }
};
const timers = null
// 防抖 input改变
const onInput = () => {
  clearTimeout(timers)
  timers = setTimeout(() => {
    getTagList()
  }, 800) //多久时间内执行一次
} 
const dataArr = ref([])
const postActive = ref(0)

const state = reactive({
  query: {
    doctmplCode: '',
    doctmplName: '',
    doctmplType: '',
    current: 1,
    size: 10,
  },
  dataList: [],
})
const pageConfig: PageConfig = reactive({
  total: 0,
  currentPage: 1,
})
const columns: Column[] = reactive([
  {
    label: '模板编码',
    prop: 'doctmplCode',
    align: 'center',
    // editable: false,
    editType: 'input', // 显示类型: input 文本类型，date: 日期，textArea, select:单选，multiSelect:多选,time:时间，Cascader：级联选择器，custome:自定义
  },
  {
    label: '模板名称',
    prop: 'doctmplName',
    align: 'center',
    queryName: '',
    editable: true,
    sortable: false,
    filterable: false,
    readonly: true,
    editType: 'input',
  },
  {
    label: '模板类型',
    prop: 'doctmplType',
    align: 'center',
    editType: 'input',
    editable: true,
    filterable: false,
    sortable: false,
    sortValue: '',
  },
  {
    label: '业务条线',
    prop: 'bizType',
    align: 'center',
    editType: 'input', // 显示类型: input 文本类型，date: 日期，textArea, select:单选，multiSelect:多选,time:时间，Cascader：级联选择器，custome:自定义
    editable: true,
    filterable: false,
    modelValue: { inputValue: '' },
    sortable: false,
    sortValue: '',
  },
  {
    label: '文件类型',
    prop: 'fileType',
    align: 'center',
    editType: 'input', // 显示类型: input 文本类型，date: 日期，textArea, select:单选，multiSelect:多选,time:时间，Cascader：级联选择器，custome:自定义
    editable: true,
    filterable: false,
    modelValue: { inputValue: '' },
    sortable: false,
    sortValue: '',
  },
  {
    label: '目录',
    prop: 'categoryName',
    align: 'center',
    editType: 'input', // 显示类型: input 文本类型，date: 日期，textArea, select:单选，multiSelect:多选,time:时间，Cascader：级联选择器，custome:自定义
    editable: true,
    filterable: false,
    modelValue: { inputValue: '' },
    sortable: false,
    sortValue: '',
  },
  {
    label: '描述',
    prop: 'remark',
    align: 'center',
    editType: 'input', // 显示类型: input 文本类型，date: 日期，textArea, select:单选，multiSelect:多选,time:时间，Cascader：级联选择器，custome:自定义
    editable: true,
    filterable: false,
    modelValue: { inputValue: '' },
    sortable: false,
    sortValue: '',
  },
  {
    label: '创建人',
    prop: 'recCreator',
    align: 'center',
    editType: 'input', // 显示类型: input 文本类型，date: 日期，textArea, select:单选，multiSelect:多选,time:时间，Cascader：级联选择器，custome:自定义
  },
  {
    label: '创建时间',
    prop: 'recCreateTime',
    align: 'center',
    editType: 'time-picker', // 显示类型: input 文本类型，date: 日期，textArea, select:单选，multiSelect:多选,time:时间，Cascader：级联选择器，custome:自定义
  },
  {
    label: '',
    prop: 'action',
    actionConfig: [
      { id: 'editTmplInfo', type: 'editTmplInfo' },
      { id: 'editTmplCont', type: 'editTmplCont' },
      { id: 'deleteTmpl', type: 'deleteTmpl' },
      { id: 'copyTmpl', type: 'copyTmpl' },
    ],
  },
])

const checkedRows = ref([])
const handleSelectionChange = (e) => {
  checkedRows.value = e
}
const selectPostClick = (item, index) => {
  // addInfo.value = item
  postActive.value = index
  // pageConfig.currentPage = 1
  // console.log(activeName.value, 'activeName.value')
  // searchFn('query', '')
  // getCopyTree()
}
// const searchFn = (type?: string, columnsVal?: any) => {
//   const obj = initSearchData(type, columnsVal, columns, state.query)
//   state.query = obj.queryData
//   columns.values = obj.columns

//   state.query.current = pageConfig.currentPage
//   isTableLoading.value = true
//   if (pageConfig.pageSize) state.query.size = pageConfig.pageSize
//   const par = {
//     current:pageConfig.currentPage,
//     size:10
//   }
//   apiQuery(par)
//     .then((res) => {
//       isTableLoading.value = false
//       if (res.data.success) {
//         state.dataList = res.data.data.result
//         pageConfig.pageSize = Number(res.data.data.size)
//         pageConfig.total = Number(res.data.data.count)
//       } else {
//         // ElMessage.error(res.data.message)
//       }
//     })
//     .catch((error: any) => {
//       isTableLoading.value = false
//       // 处理错误
//     })
// }
// const handleSizeChange = (e) => {
//   pageConfig.pageSize = e
//   pageConfig.currentPage = 1
//   searchFn('query', '')
// }
// const handleCurrentChange = (e) => {
//   pageConfig.currentPage = e
//   searchFn('query', '')
// }

const getEditTmpl = () =>{
  
  apiEditTmpl({ doctmplId: toRaw(route).query.doctmplId })
  .then((res) => {
    if (res.data.success) {
      // bizDataArr.value = res.data.data.map((v) => {
      //   return {
      //     label: v.itemCname,
      //     value: v.itemCode,
      //   }
      // })
    }
  })
  .catch((error: any) => {})
}
watch(filterText, (val) => {
        treeRef.value!.filter(val)
  })

onMounted(() => {
  getEditTmpl()
  getTagList()
})
</script>
<style lang="less" scoped>
/deep/ .el-radio__label {
  display: none;
}
/deep/ .mask-layer {
  width: 264px !important;
}
/deep/ .el-main {
  padding-top: 0;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.page-tree {
    // width: 228px;
    width: 280px;
    min-height: calc(100vh - 175px);
    padding: 16px;
    .page-tree__title {
      font-size: 16px;
      color: #303133;
      line-height: 28px;
      text-align: left;
      font-weight: bold;
    }
    .page-tree__line {
      margin: 16px -16px;
      height: 1px;
      background: #e8e8e8;
      width: calc(100% + 32px);
    }
    .page-tree__search {
      margin-bottom: 18px;
    }
    .custom-tree-node {
      display: flex;
      align-items: center;
      justify-content: space-between;
      // width: 100%;
      width: calc(100% - 26px);
      height: 32px;
      padding-right: 5px;
      position: relative;
      &-label {
        width: calc(100% - 20px);
        // width: 100%;
        text-align: left;
        // padding-right: 60px;
      }
      // &-label3 {
      //   width: calc(100% - 50px);
      //   // width: 100%;
      //   text-align: left;
      //   // padding-right: 60px;
      // }
      // &-label4 {
      //   width: calc(100% - 70px);
      //   // width: 100%;
      //   text-align: left;
      //   // padding-right: 60px;
      // }
      &-add {
        position: absolute;
        right: 5px;
        top: 8px;
        color: var(--el-color-primary-light-2);
      }
    }
    .custom-tree-node3 {
      width: calc(100% - 30px);
    }
    .custom-tree-node4 {
      width: calc(100% - 30px);
    }
    ::v-deep(.el-tree-node__content) {
      height: 32px;
      border-radius: 2px;
      .el-tree-node__expand-icon {
        color: #989898;
      }
    }
  }
.opt_btn {
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.postList_css {
  background: #fff;
  position: relative;
  // height: calc(100vh - 200px);
  h3 {
    font-size: 18px;
    line-height: 55px;
    padding-left: 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
    color: #000000;
    .icon_css {
      float: right;
      margin-top: 16px;
      margin-right: 12px;
    }
  }

  .input-css {
    padding: 0px 15px 20px 15px;
  }
  p {
    line-height: 35px;
    padding: 0px 8px;
    margin: 0 15px;
    cursor: pointer;
  }
  .postActive_css {
    background: #fff3f3;
    color: #b5415a;
  }
  .post_pagination {
    // width:240px;
    position: absolute;
    bottom: 20px;
    right: 10px;
  }
}
.shouq_title {
  line-height: 50px;
  margin-bottom: 20px;
  border-bottom: 0.5px solid #eee;
  .label_css {
    margin-right: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
  }
  .btn {
    float: right;
  }
}
</style>
